import { useState, useRef } from "react";

export default function ControlComp() {
  // const usernameRef = useRef(null);
  // const handleSubmit = (e: any) => {
  //   e.preventDefault();
  //   console.log(usernameRef.current.value);
  // };

  const [username, setUsername] = useState("");

  const handleUsernameChange = (e: any) => {
    setUsername(e.target.value);
  };

  const handleSubmit = (e: any) => {
    e.preventDefault();
    console.log(username);
  };

  // 通过value属性和onChange事件收集表单数据，就是受控组件（推荐）
  // 通过ref收集表单数据，就是非受控组件
  return (
    <form onSubmit={handleSubmit}>
      <h1>ControlComp</h1>
      <label>用户名</label>
      {/* <input type="text" ref={usernameRef} /> <br /> */}
      <input type="text" value={username} onChange={handleUsernameChange} />
      <br />
      <label>密码</label>
      <input type="password" /> <br />
      <button type="submit">提交</button>
    </form>
  );
}
